<template>
    <view>
        <!-- subpackage/payStatus/payStatus.wxml -->
        <custom-navbar :showTitle="false" backgroundColor="#ffffff" textColor="#ffffff" :showBack="true" :isCoverNav="false"></custom-navbar>
        <view class="payStatus" :style="'height: calc(100vh - ' + navHeight + 'px);'">
            <!-- 支付状态图标和标题 -->
            <view class="payStatus_icon">
                <view :class="'status-icon ' + (paymentSuccess ? 'success' : 'fail')">
                    <text class="icon-emoji">{{ paymentSuccess ? statusText.success.icon : statusText.fail.icon }}</text>
                </view>
                <text class="status-title">{{ paymentSuccess ? statusText.success.title : statusText.fail.title }}</text>
                <text class="status-subtitle">{{ paymentSuccess ? statusText.success.subtitle : statusText.fail.subtitle }}</text>
            </view>

            <!-- 订单信息 -->
            <!-- <view class="payStatus_order" v-if="orderInfo.orderId">
                <view class="order-item">
                    <text class="order-label">订单号</text>
                    <text class="order-value">{{ orderInfo.orderId }}</text>
                </view>
                <view class="order-item" v-if="orderInfo.roomName">
                    <text class="order-label">房间</text>
                    <text class="order-value">{{ orderInfo.roomName }}</text>
                </view>
                <view class="order-item" v-if="orderInfo.hotelName">
                    <text class="order-label">酒店</text>
                    <text class="order-value">{{ orderInfo.hotelName }}</text>
                </view>
                <view class="order-item" v-if="orderInfo.checkInDate && orderInfo.checkOutDate">
                    <text class="order-label">入住时间</text>
                    <text class="order-value">{{ orderInfo.checkInDate }} 至 {{ orderInfo.checkOutDate }}</text>
                </view>
                <view class="order-item" v-if="orderInfo.nights > 0">
                    <text class="order-label">入住天数</text>
                    <text class="order-value">{{ orderInfo.nights }}晚</text>
                </view>
                <view class="order-item" v-if="orderInfo.totalPrice > 0">
                    <text class="order-label">支付金额</text>
                    <text class="order-value price">￥{{ orderInfo.totalPrice }}</text>
                </view>
            </view> -->

            <!-- 操作按钮 -->
            <view class="payStatus_btn">
                <!-- 支付成功时的按钮 -->
                <block v-if="paymentSuccess">
                    <view class="payStatus_btn_box">
                        <up-button round plain color="#396136" custom-class="btn" @tap.native="goToHomePage">返回首页</up-button>
                    </view>
                    <view class="payStatus_btn_box">
                        <up-button round color="#396136" custom-class="btn" @tap.native="goToOrderList">查看订单</up-button>
                    </view>
                </block>

                <!-- 支付失败时的按钮 -->
                <block v-else>
                    <view class="payStatus_btn_box">
                        <up-button round plain color="#ff6b6b" custom-class="btn" @tap.native="contactService">联系客服</up-button>
                    </view>
                    <view class="payStatus_btn_box">
                        <up-button round color="#396136" custom-class="btn" @tap.native="retryPayment">重新支付</up-button>
                    </view>
                </block>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, onMounted } from 'vue'
	import customNavbar from '../../components/custom-navbar/index.vue'



// 响应式数据
const navHeight = ref<number>(uni.getStorageSync('navHeight') ? uni.getStorageSync('navHeight') : 88)
const paymentSuccess = ref<boolean>(true)
const statusText = ref<any>({
  success: {
    title: '支付成功',
    subtitle: '您的订单已确认，请按时入住',
    icon: '✅'
  },
  fail: {
    title: '支付失败',
    subtitle: '支付遇到问题，请重试或联系客服',
    icon: '❌'
  }
})
// 页面加载处理
const orderData = ref<any>({})
const loadPageData = (options: any): void => {
  console.log('options',options)
  let obj = JSON.parse(decodeURIComponent(options.orderData))
  console.log('orderData',obj)
  // 获取支付状态
  const success = obj.success === '1'
  paymentSuccess.value = success

  // 获取订单信息
  if (obj.orderInfo) {
    try {
      orderData.value = obj.orderInfo
    } catch (error) {
      console.log('CatchClause', error)
      console.error('解析订单信息失败:', error)
    }
  }
  
}


// 重新支付
const retryPayment = (): void => {
  // 返回支付页面重新支付
  uni.navigateBack()
}

// 联系客服
const contactService = (): void => {
  uni.showModal({
    title: '联系客服',
    content: '客服电话：400-123-4567\n工作时间：9:00-21:00',
    confirmText: '拨打电话',
    cancelText: '取消',
    success: (res: any) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: '4001234567',
          fail: (err: any) => {
            console.error('拨打电话失败:', err)
            uni.showToast({
              title: '拨打失败',
              icon: 'error'
            })
          }
        })
      }
    }
  })
}

const goToHomePage = (): void => {
  uni.reLaunch({
    url: '/pages/index/index'
  })
}

const goToOrderList = (): void => {
  uni.redirectTo({
    url: '/subpackage/shopOrderDetail/shopOrderDetail?id=' + orderData.value.id
  })
}

onLoad((options)=>{
	loadPageData(options)
})

// 页面挂载时处理
onMounted(() => {
  // 可以在这里处理页面参数
})


</script>
<style>
/* subpackage/payStatus/payStatus.wxss */
.payStatus {
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    padding: 40rpx;
    box-sizing: border-box;
}
.payStatus_icon {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 50rpx;
    margin-bottom: 60rpx;
}

/* 状态图标样式 */
.status-icon {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
    animation: scaleIn 0.5s ease-out;
}

.status-icon.success {
    background-color: rgba(76, 175, 80, 0.1);
    border: 3rpx solid rgba(76, 175, 80, 1);
}

.status-icon.fail {
    background-color: rgba(244, 67, 54, 0.1);
    border: 3rpx solid rgba(244, 67, 54, 1);
}

.icon-emoji {
    font-size: 60rpx;
    line-height: 1;
}

.status-title {
    font-size: 40rpx;
    font-weight: bold;
    color: rgba(19, 19, 19, 1);
    margin-bottom: 16rpx;
    text-align: center;
}

.status-subtitle {
    font-size: 28rpx;
    color: rgba(102, 102, 102, 1);
    text-align: center;
    line-height: 40rpx;
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 订单信息样式 */
.payStatus_order {
    width: 100%;
    background-color: rgba(248, 249, 250, 1);
    border-radius: 16rpx;
    padding: 40rpx 30rpx;
    margin-bottom: 60rpx;
    box-sizing: border-box;
}

.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid rgba(238, 238, 238, 1);
}

.order-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.order-label {
    font-size: 28rpx;
    color: rgba(102, 102, 102, 1);
    flex-shrink: 0;
}

.order-value {
    font-size: 28rpx;
    color: rgba(19, 19, 19, 1);
    text-align: right;
    flex: 1;
    margin-left: 20rpx;
    word-break: break-all;
}

.order-value.price {
    font-size: 32rpx;
    font-weight: bold;
    color: rgba(57, 97, 54, 1);
}

.payStatus_btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0 30rpx;
    margin-top: auto;
    padding-top: 40rpx;
}
.payStatus_btn_box {
    flex: 1;
}
.payStatus_btn .btn {
    width: 100%;
    flex: 1;
    height: 80rpx;
    margin: 0 !important;
}
</style>
